<template>
    <div class="home">

        <!--        顶部新闻栏-->
        <div class="home-top flex flex-space-between">
            <div class="home-top-img" v-if="bannerInfo[0]">
                <swiper :options="swiperOptionsBanner" key="swiperOptionsBanner" class="flex flex-align-center">
                    <swiper-slide
                            style="height: 320px"
                            v-for="(item,index) in bannerInfo"
                            :key="index"
                    >
                        <el-image
                                style="width: 100%;height: 100%"
                                :src="$store.state.baseUrl + item.image"
                                :preview-src-list="[$store.state.baseUrl + item.image]">
                        </el-image>
                        <!--                            <img-->
                        <!--                                    :src="$store.state.baseUrl + item.list_image"-->
                        <!--                                    alt=""-->
                        <!--                            >-->
                    </swiper-slide>
                    <div
                            class="swiper-pagination"
                            slot="pagination"
                    ></div>
                    <!--                    <div-->
                    <!--                            class="swiper-button-prev"-->
                    <!--                            slot="button-prev"-->
                    <!--                    ></div>-->
                    <!--                    <div-->
                    <!--                            class="swiper-button-next"-->
                    <!--                            slot="button-next"-->
                    <!--                    ></div>-->
                </swiper>
                <!--                <img :src="$store.state.baseUrl + bannerInfo[0]['image']" :alt="bannerInfo[0]['name']">-->
            </div>
            <div class="home-top-news" style="width: 489px" v-if="listInfo['16']">
                <div class="home-top-news-top flex flex-align-center flex-space-between">
                    <div class="home-top-news-tab flex flex-align-center">{{listInfo['16']['name']}}</div>
                    <span style="cursor: pointer;color: #666" @click="moreClick(listInfo['16'])">
                        更多+
                    </span>
                </div>
                <ul class="home-top-news-list">
                    <li class="home-top-news-item flex flex-align-center flex-space-between" @click="toDetail(item)"
                        v-for="(item,index) in listInfo['16']['article'].slice(0,8)">
                        <p class="home-top-news-item-title flex flex-align-center pointer">
                            <span class="home-top-news-item-tip"></span>
                            <span class="showEllipsis" style="width: 70%">{{item.title}}</span>
                            <i style="width: 24px;margin-left: 10px;margin-top: -2px" v-if="index<3">
                                <img class="img" src="@/assets/imgs/common/top.png" alt="">
                            </i>
                        </p>
                        <span class="home-top-news-item-time">
                            {{item.createtime}}
                        </span>
                    </li>
                </ul>
            </div>
            <div class="home-top-news home-inform-box" style="width: 407px" v-if="listInfo['54']&&listInfo['56']">
                <div class="home-inform" style="width: auto;">
                    <tabSelect :tabs="[listInfo['54'],listInfo['56']]" chageId="5" @tabSelect="tabSelect"></tabSelect>
                    <div class="home-inform-con">
                        <ul class="home-inform-con-list"
                            style="width: auto"
                            v-if="showInfo.listInfo5">
                            <li class="home-inform-con-item flex flex-align-center flex-space-between pointer"
                                @click="toDetail(item)"
                                v-for="item in (showInfo.listInfo5['article'].slice(0,6))">
                                <p class="home-inform-con-item-title flex flex-align-center">
                                <span
                                        class="home-inform-con-item-tip"></span> <div class="showEllipsis" style="width: 96%">{{item.title}}</div>
                                </p>
<!--                                <span class="home-inform-con-item-time">-->
<!--                            {{item.createtime}}-->
<!--                        </span>-->
                            </li>
                        </ul>
                    </div>
                </div>


            </div>
        </div>


        <!--        广告位-->
        <div class="home-poster" v-if="adnewInfo.image">
            <img class="img" :src="$store.state.baseUrl + adnewInfo.image" alt="">
        </div>
        <!--        通知公告-->
        <div class="home-inform-box flex flex-space-between">
            <!--        通知公告-->
            <div class="home-inform" style="width: 454px;" v-if="listInfo['18']">
                <tabSelect :tabs="[listInfo['18']]" chageId="1" @tabSelect="tabSelect"></tabSelect>
                <div class="home-inform-con flex flex-space-between">
<!--                    <div class="home-inform-con-info"-->
<!--                         @click="toDetail(listInfo['18']['article'][0])">-->
<!--                        <h2 style="padding: 10px 0">-->
<!--                            {{listInfo['18']['article'][0]['title']}}-->
<!--                        </h2>-->
<!--                        <div class="home-inform-con-info-con">-->
<!--                            {{listInfo['18']['article'][0]['desc']}}-->
<!--                        </div>-->
<!--                    </div>-->
                    <ul class="home-inform-con-list">
                        <li class="home-inform-con-item flex flex-align-center flex-space-between pointer"
                            @click="toDetail(item)"
                            v-for="item in (listInfo['18']['article'].slice(0,5))">
                            <p class="home-inform-con-item-title flex flex-align-center">
                                <span
                                        class="home-inform-con-item-tip"></span> <div class="showEllipsis" style="width: calc(100% - 100px)">{{item.title}}</div>
                            </p>
                            <span class="home-inform-con-item-time">
                            {{item.createtime}}
                        </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--        机关文件-->
            <div class="home-inform" style="width: 489px;" v-if="listInfo['22']">
                <tabSelect :tabs="[listInfo['22']]" chageId="1" @tabSelect="tabSelect"></tabSelect>
                <div class="home-inform-con flex flex-space-between">

                    <ul class="home-inform-con-list"
                        :style="{'width':'100%'}"
                        v-if="showInfo.listInfo1">
                        <li class="home-inform-con-item flex flex-align-center flex-space-between pointer"
                            @click="toDetail(item)"
                            v-for="item in (listInfo['22']['article'].slice(0,5))">
                            <p class="home-inform-con-item-title flex flex-align-center">
                                <span
                                        class="home-inform-con-item-tip"></span><div class="showEllipsis" style="width: calc(100% - 100px)">{{item.title}}</div>
                            </p>
                            <span class="home-inform-con-item-time">
                            {{item.createtime}}
                        </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--                今日值班-->
            <div class="home-today-worker">
                <div class="home-today-worker-top flex flex-align-center flex-space-between">
                    <label class="bold">今日值班</label>
                    <span>
                       {{ todayData }}
                    </span>
                </div>
                <div class="home-today-worker-con" v-if="dutyInfo.newdata">
                    <div class="home-today-worker-con-item flex flex-align-center flex-space-between"
                         v-for="worker in dutyInfo.newdata.people">
                        <span class="home-today-worker-con-title">
                            {{worker.name}}
                        </span>
                        <span class="home-today-worker-con-name">
                            {{worker.value}}
                        </span>
                    </div>
                </div>
                <div class="other-links flex flex-align-center flex-space-between">
                    <div class="other-link-item flex flex-align-center pointer" v-for="item in dutyInfo.nav"
                         :key="item.name" @click="linkTo(item)">
                        <i>
                            <img class="img" src="@/assets/imgs/home/gh.png" alt="">
                        </i>
                        <span>{{item.name}}</span>
                    </div>

                </div>
            </div>

        </div>


        <!--        培训汇总-->
        <div class="home-study-total" style="
margin-top: 14px">
            <tabSelect :tabs="[{name:'培训汇总'}]" hasMore="2"></tabSelect>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%;margin: 30px 0 50px 0">
                <el-table-column
                        v-for="item in tableHeader"
                        :key="item.title"
                        :prop="item.val"
                        :label="item.title"
                        :width="item.width">
                    <template slot-scope="scope">
                        <a v-if="item.val=='kcb'" :href="$store.state.baseUrl  + scope.row.file">{{scope.row[item.val]}}</a>
                        <span v-else>{{ scope.row[item.val] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!--        机关动态-->
        <div class="home-info-option flex flex-space-between">
            <div class="home-info-option-left" v-if="listInfo['26']">
                <tabSelect :tabs="[listInfo['26']]"></tabSelect>
                <div class="home-info-option-left-con flex flex-space-between">
                    <div v-for="item in listInfo['26']['article'].slice(0,6)"
                         class=" home-info-option-left-con-item pointer flex">
                        <i class="home-info-option-left-con-tip"></i>
                        <div style="width: 96%;margin: auto">
                            <p @click="toDetail(item,2)">
                                <span class="bold">{{item.ks_text}}</span> :
                            </p>
                            <div class="flex flex-space-between">
                                <p @click="toDetail(item)" :title="item.title" class="showEllipsis" style="width: 220px;margin-top: 4px;color: #666">
                                    {{item.title}}
                                </p>
                                <span class="home-info-option-left-con-item-info">
                                                            {{item.createtime}}
                                </span>
                            </div>


                        </div>
                    </div>
                </div>
            </div>

            <div class="home-info-option-left" v-if="listInfo['28']&&listInfo['30']">
                <tabSelect :tabs="[listInfo['28'],listInfo['30']]" chageId="2" @tabSelect="tabSelect"></tabSelect>
                <div class="home-info-option-left-con flex flex-space-between">
<!--                    <div class="home-info-option-img">-->
<!--                        <img :src="$store.state.baseUrl +  showInfo.listInfo2['article'][0]['list_image']" alt="">-->
<!--                    </div>-->
                    <div class="home-info-option-list">
                        <div @mouseover="showTipIndex = index" @click="toDetail(item)"
                             v-for="(item,index) in showInfo.listInfo2['article'].slice(0,5)"
                             class="pointer flex flex-align-center home-info-option-list-item  pxgz-style">
                            <i class="home-info-option-list-tip" v-show="showTipIndex==index">
                                <img class="img" src="@/assets/imgs/home/listTip.png" alt="">
                            </i>
                            <p class="showEllipsis" style="display: block;width: 100%;overflow: hidden">
                                {{item.title}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        研讨交流-->
        <div class="home-info-option flex flex-space-between">
            <div class="home-info-option-left" v-if="listInfo['32']&&listInfo['34']">
                <tabSelect :tabs="[listInfo['34'],listInfo['32']]" chageId="3" @tabSelect="tabSelect"></tabSelect>
                <div class="home-info-option-left-con flex" style="justify-content: center;margin-top: 30px;">

                    <div v-for="item in showInfo.listInfo3['article'].slice(0,4)" @click="toDetail(item)"
                         class="pointer flex flex-align-center" style="width: 100%">
                        <div class="flex flex-align-center ytStyle-item pointer">
                            <p class="ytStyle-time flex flex-align-center">
                                {{item.createtime.split('-')[1]}} - <span
                                    class="bold">{{item.createtime.split('-')[2]}}</span>
                            </p>
                            <p class="ytStyle-info">
                                {{item.title}}
                            </p>
                        </div>
                    </div>

                </div>
            </div>
            <!--            督查读报-->
            <div class="home-info-option-left" v-if="listInfo['35']&&listInfo['38']">
                <tabSelect :tabs="[listInfo['38'],listInfo['35']]" chageId="4" @tabSelect="tabSelect"></tabSelect>
                <div class="home-info-option-left-con flex" style="justify-content: center">
                    <div class="" style="width: 100%">
                        <div v-for="item in showInfo.listInfo4['article'].slice(0,showInfo.listInfo4['id']=='35' ?2:4)"
                             @click="toDetail(item)"
                             class="pointer flex flex-align-center personStyle-item">
                            <i class="personStyle-img" v-show="showInfo.listInfo4['id']=='35'">
                                <img class="img" :src="$store.state.baseUrl + item.list_image" alt="">
                            </i>
                            <div class="personStyle-info">
                                <h2>{{item.title}}</h2>
                                <!--                                <p v-html="item.content">-->
                                <!--                                    {{item.info}}-->
                                <!--                                </p>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--        轮播 精彩瞬间-->
        <div class="home-wonderful flex flex-space-between flex-align-center">
            <div class="home-wonderful-round-list-more" style="cursor: pointer" @click="moreClick(listInfo['24'])">
                更多+
            </div>
            <div class="home-wonderful-left-img">
                <img class="img" src="@/assets/imgs/home/wonderful.png" alt="">
            </div>
            <div class="home-wonderful-round-list flex flex-align-center" v-if="listInfo['24']">
                <swiper :options="swiperOptions" :loop="true" key="swiperOptions" class="flex flex-align-center">
                    <swiper-slide
                            v-for="(item,index) in listInfo['24']['article']"
                            :key="index"
                    >
                        <el-image
                                style="height: 150px"
                                :src="$store.state.baseUrl + item.list_image"
                                :preview-src-list="[$store.state.baseUrl + item.list_image]">
                        </el-image>
                        <!--                            <img-->
                        <!--                                    :src="$store.state.baseUrl + item.list_image"-->
                        <!--                                    alt=""-->
                        <!--                            >-->
                    </swiper-slide>
                    <!--                    <div-->
                    <!--                            class="swiper-pagination"-->
                    <!--                            slot="pagination"-->
                    <!--                    ></div>-->
                    <!--                    <div-->
                    <!--                            class="swiper-button-prev"-->
                    <!--                            slot="button-prev"-->
                    <!--                    ></div>-->
                    <!--                    <div-->
                    <!--                            class="swiper-button-next"-->
                    <!--                            slot="button-next"-->
                    <!--                    ></div>-->
                </swiper>
            </div>
        </div>

        <div id="TOPUp" v-show="showTopIcon" @click="toTop">
            <img class="img" src="@/assets/imgs/common/toTop.png" alt="">
        </div>



    </div>
</template>

<script>
    // @ is an alias to /src
    import tabSelect from './components/tabSelect'
    import {home} from '@/assets/api/api.js'
    import {swiper, swiperSlide} from "vue-awesome-swiper";
    import "swiper/css/swiper.min.css";

    export default {
        name: "Home",
        components: {tabSelect, swiper, swiperSlide},
        data() {
            return {
                showTopIcon: false,
                bannerInfo: [],
                showTipIndex: 0,
                showInfo: {
                    listInfo1: null,
                    listInfo2: null,
                    listInfo3: null,
                    listInfo4: null,
                    listInfo5: null
                },
                adnewInfo: {},
                dutyInfo: [],
                optionList: [16, 18, 22, 24, 26, 28, 30, 32, 34, 35, 38, 56, 54,],
                listInfo: {},
                tableHeader: [
                    // {
                    //     title: '序号',
                    //     val: 'sn',
                    //     width: 100
                    // },
                    {
                        title: '培训班名称',
                        val: 'name',
                        width: '150'
                    },
                    {
                        title: '主办单位',
                        val: 'company',
                        width: 180
                    },
                    {
                        title: '办班日期',
                        val: 'datetime',
                        width: 130
                    },
                    {
                        title: '天数',
                        val: 'days',
                        width: 50
                    },
                    {
                        title: '参加人员',
                        val: 'people',
                        width: 140
                    },
                    {
                        title: '培训内容',
                        val: 'mycontent',

                    },
                    {
                        title: '住宿地点',
                        val: 'place',
                        width: 80
                    },
                    {
                        title: '课程表',
                        val: 'kcb',
                    },
                    {
                        title: '状态',
                        val: 'status',
                        width: 80
                    },
                ],
                tableData: [],
                swiperOptionsBanner: {
                    spaceBetween: 30,
                    effect: "fade",
                    autoplay: {
                        delay: 2500,  // 多长时间进行一次自动切换
                        disableOnInteraction: false,  // 用户点击一次后是否取消自动切换 默认true
                    },
                    speed: 1000, // 切换速度
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                },
                swiperOptions: {
                    slidesPerView: 4,
                    spaceBetween: 10,

                    // loop: true,
                    // effect: "cube",
                    // cube: {
                    //     slideShadows: true,
                    //     shadow: true,
                    //     shadowOffset: 100,
                    //     shadowScale: 0.6,
                    // },
                    loopAdditionalSlides: 8,
                    autoplay: {
                        delay: 2500,  // 多长时间进行一次自动切换
                        disableOnInteraction: false,  // 用户点击一次后是否取消自动切换 默认true
                    },
                    speed: 300, // 切换速度
                    // navigation: {
                    //     nextEl: ".swiper-button-next",
                    //     prevEl: ".swiper-button-prev",
                    // },

                },
                slideList: [
                    {
                        id: "42",
                        img: require("@/assets/imgs/home/1.png"),
                    },
                    {
                        id: "45",
                        img: require("@/assets/imgs/home/1.png"),
                    },
                    {
                        id: "45",
                        img: require("@/assets/imgs/home/1.png"),
                    },
                    {
                        id: "45",
                        img: require("@/assets/imgs/home/1.png"),
                    },
                    {
                        id: "45",
                        img: require("@/assets/imgs/home/1.png"),
                    },
                ],
                tabindex: 0,
            }
        },
        created() {
            this.getData()
        },
        computed: {
            todayData() {
                var myDate = new Date;
                var year = myDate.getFullYear(); //获取当前年
                var mon = myDate.getMonth() + 1; //获取当前月
                var date = myDate.getDate(); //获取当前日
                var week = myDate.getDay();//获取当前星期
                var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                return year + '年' + mon + '月' + date + '日' + '   ' + weeks[week]
            },

        },
        mounted() {
            window.addEventListener("scroll", this.showToTop);
        },
        //销毁,否则跳到别的路由还是会出现
        destroyed() {
            window.removeEventListener('scroll', this.showToTop)
        },
        methods: {
            toTop() {
                var timer = setInterval(function () {
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 10);
                    document.documentElement.scrollTop = document.body.scrollTop =
                        osTop + ispeed;
                    this.isTop = true;
                    if (osTop === 0) {
                        clearInterval(timer);
                    }
                }, 30);
            },
            showToTop() {
                if (document.documentElement.scrollTop > 50) {
                    this.showTopIcon = true;
                } else {
                    this.showTopIcon = false;
                }
            },
            toDetail(data,type=1) {
                if (data.jumptype == "news") {

                } else {
                    if(type==1){
                        localStorage.setItem('toShowPageInfo', '1')
                    }
                }

                this.$store.state.detailId = data.id;
            // ,query:{secId:data.category_id}
                this.$router.push('/pathPage/' + data.jumptype + '/' + data.nav_id + '?secId=' + data.category_id)
                // this.$router.push({path:'/pathPage/' + data.jumptype + '/' + data.nav_id})
            },
            moreClick(data) {
                this.$store.state.detailId = '-1';
                this.$router.push('/pathPage/' + data.type + '/' + data.pid)
            },
            tabSelect(data) {
                // if(data.data.id == '22'){
                //     this.$router.push('/pathPage/' + data.data.type + '/' + data.data.pid)
                // }else{
                //     this.showInfo['listInfo' + data.id] = data.data;
                // }
                this.showInfo['listInfo' + data.id] = data.data;
                console.log(this.showInfo.listInfo4)
            },
            linkTo(data) {
                if (data.type) {
                    this.$router.push('/pathPage/' + data.type + '/' + data.id)
                } else {
                    window.location.href = data.url;
                }
            },
            getData() {
                this.$http(home.banner, {}).then((res) => {
                    this.bannerInfo = res.data
                })
                this.$http(home.adnew, {}).then((res) => {
                    this.adnewInfo = res.data
                })
                this.$http(home.duty, {}).then((res) => {
                    this.dutyInfo = res.data
                })
                this.optionList.map((v) => {
                    this.$http(home.catelist, {
                        cate_id: v
                    }).then((res) => {
                        this.$set(this.listInfo, v, res.data);
                        switch (v) {
                            case 18:
                                this.showInfo.listInfo1 = res.data;
                                break;
                            case 28:
                                this.showInfo.listInfo2 = res.data;
                                break;
                            case 34:
                                this.showInfo.listInfo3 = res.data;
                                break;
                            case 38:
                                this.showInfo.listInfo4 = res.data;
                                break;
                            case 54:
                                this.showInfo.listInfo5 = res.data;
                            default:
                                break;
                        }

                    })
                })
                this.$http(home.allteaining, {}).then((res) => {
                    this.tableData = res.data;
                })
            },
            // 培训汇总点击
            rowClick(row,column){

                if(column.property == 'kcb'){
                    console.log(row)
                    var link = document.createElement('a');
                    link.href = this.$store.state.baseUrl + row.file;
                    link.download = row.kcb;
                    link.click();
                }
            }
        }
    };
</script>

<style lang="scss">

    .home {
        margin-top: 30px;

        .swiper-wrapper {
            align-items: center;
        }

        #TOPUp {
            display: block;
            width: 40px;
            position: fixed;
            right: 10px;
            bottom: 100px;
            cursor: pointer;
        }

        .home-top {
            width: 100%;

            .home-top-img {
                width: 454px;
            }

            .home-top-news {
                width: calc(32%);

                .home-top-news-top {
                    border-bottom: 1px solid #ccc;
                    color: #fff;
                    .home-top-news-tab{
                        width: 163px;
                        height: 50px;
                        justify-content: center;
                        background: linear-gradient(90deg, #b60a0a, #c90101);
                        font-size: 22px;
                    }

                }

                .home-top-news-list {
                    margin-top: 10px;

                    .home-top-news-item {
                        padding: 8px 10px;

                        .home-top-news-item-title {
                            width: calc(100% - 80px);
                            font-size: 14px;

                            .home-top-news-item-tip {
                                background: #ff0000;
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                                margin-right: 6px;
                            }
                        }

                        .home-top-news-item-time {
                            width: 70px;
                            text-align: right;
                            color: #999;
                        }
                    }
                }

            }

            .home-top-news-right {
                width: calc(32%);
            }
        }

        .home-poster {
            width: 100%;
            margin: 30px 0;
        }

        .home-inform-box {
            .home-inform {
                width: calc(100% - 360px);

                .home-inform-con {
                    margin-top: 10px;

                    .home-inform-con-info {
                        width: 220px;
                        padding: 10px;
                        background: rgba(239, 245, 251, 1);
                        position: relative;

                        .home-inform-con-info-con {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 6; //几行
                            -webkit-box-orient: vertical;
                        }
                    }

                    .home-inform-con-info:after {
                        content: "详情➝";
                        width: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        height: 30px;
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        background: #2B699B;
                    }

                    .home-inform-con-list {
                        height: 220px;
                        padding: 0 20px;
                        overflow-y: auto;

                        .home-inform-con-item {
                            padding: 12px 0 12px 0;
                            font-size: 14px;
                            .home-inform-con-item-title {
                                font-size: 14px;
                                .home-inform-con-item-tip {
                                    width: 4px;
                                    height: 4px;
                                    background: #0F5EAF;
                                    border-radius: 50%;
                                    margin-right: 6px;
                                }
                            }

                            .home-inform-con-item-time {
                                color: #999;
                            }
                        }
                    }
                }
            }

            .home-today-worker {
                width: 407px;

                .home-today-worker-top {
                    height: 36px;
                    padding: 0 70px 0 50px;
                    color: #fff;
                    background: linear-gradient(-90deg, #9cc5ef 0%, #206fcb 100%);

                    > label {
                        font-size: 16px;
                    }
                }

                .home-today-worker-con {
                    font-size: 16px;

                    .home-today-worker-con-item {
                        text-align: center;
                        border-bottom: 1px solid #bdd2e5;
                        height: 38px;
                        line-height: 38px;

                        .home-today-worker-con-title {
                            width: 40%;
                            height: 100%;
                            background: #dfeaf7;
                            border-right: 1px solid #bdd2e5;
                        }

                        .home-today-worker-con-name {
                            width: 60%;
                            height: 100%;
                            background: #eff5fb;
                        }
                    }

                    .home-today-worker-con-item:last-child {
                        border: none;
                    }

                }

                .other-links {
                    flex-wrap: wrap;
                    margin-top: 10px;

                    .other-link-item {
                        width: calc(48% - 20px);
                        justify-content: center;
                        margin-bottom: 6px;
                        background: #F4F4F4;
                        border: 1px solid #E6E6E6;
                        padding: 4px 10px;
                        font-weight: bold;
                        font-size: 14px;

                        i {
                            width: 14px;
                            margin-right: 4px;
                            overflow: hidden;
                            img{
                                margin-top: 4px;
                            }
                        }
                    }
                }
            }
        }

        .home-wonderful {
            width: calc(100% - 40px);
            height: 230px;
            padding: 0 20px;
            margin: 30px 0;
            background: #f1f1f1;
            position: relative;

            .home-wonderful-round-list-more {
                position: absolute;
                width: 40px;
                height: 20px;
                right: 10px;
                top: 10px;
                z-index: 2;
            }

            .home-wonderful-left-img {
                width: 20px;
            }

            .home-wonderful-round-list {
                width: calc(100% - 40px);
                height: 100%;
            }
        }

        .home-info-option {
            .home-info-option-left {
                width: 49%;
                margin-bottom: 30px;

                .home-info-option-left-con {
                    flex-wrap: wrap;
                    margin-top: 30px;

                    .home-info-option-left-con-item {
                        width: 48%;
                        padding: 14px 0;
                        border-bottom: 1px solid #f1f1f1;

                        font-size: 14px;

                        .home-info-option-left-con-tip {
                            display: block;
                            width: 5px;
                            height: 5px;
                            background: #2B699B;
                            margin-top: 6px;
                            margin-right: 10px;
                        }

                        .home-info-option-left-con-item-info {
                            color: #959595;
                            margin-top: 6px;
                        }
                    }

                }
            }

            .home-info-option-img {
                width: 240px;
                height: 170px;
            }

            .home-info-option-list {
                width: calc(100% - 260px);
                display: flex;
                align-content: space-between;
                flex-wrap: wrap;

                .home-info-option-list-item {
                    margin: 0px 0px 0px 10px;
                    position: relative;
                    font-size: 14px;
                }

                .home-info-option-list-tip {
                    width: 10px;
                    position: absolute;
                    top: 10px;
                    left: -14px;
                }
            }


            .ytStyle-item {
                background: #F9F9F9;
                border: 1px solid #E9E9E9;
                padding: 10px 0px;
                margin: 0 0px 15px 0;
                width: 100%;

                font-size: 13px;

                .ytStyle-time {
                    width: 60px;
                    justify-content: center;
                    border-right: 1px solid #E9E9E9;

                    span {
                        font-size: 16px;
                        color: #2B699B;
                        margin-left: 4px;

                    }
                }

                .ytStyle-info {
                    width: calc(100% - 80px);
                    padding-left: 20px;
                }
            }

            .personStyle-item {
                background: #EFF5FB;
                padding: 10px;
                margin-bottom: 16px;

                .personStyle-img {
                    width: 60px;
                    height: 74px;
                    margin-right: 10px;
                }

                .personStyle-info {
                    width: calc(100% - 0px);

                    > h2 {
                        font-size: 14px;
                    }

                    > p {
                        margin-top: 2px
                    }
                }
            }

            .pxgz-style {
                padding: 10px 0 14px 0;
            }

        }
    }

</style>
